<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/start' }">企业后台</el-breadcrumb-item>
      <el-breadcrumb-item>企业大事记</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入事记流水号进行搜索"
            v-model="input"
            clearable
            size="medium"
          >
            <el-button
              type="primary"
              slot="append"
              icon="el-icon-search"
              @click="search()"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="8">
          <!-- 新增按钮 -->
          <el-button type="primary" @click="adds()" icon="el-icon-circle-plus"
            >新增</el-button
          >
        </el-col>
      </el-row>

      <!-- 用户列表区域 -->
      <el-table :data="tableData" stripe style="width: 100%" border >
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="number" label="事记流水号"> </el-table-column>
        <el-table-column prop="time" label="创建时间"> </el-table-column>
        <el-table-column prop="title" label="标题"> </el-table-column>
        <el-table-column prop="content" label="内容"> </el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button
              type="success"
              icon="el-icon-edit"
              @click="sets(scope.row)"
              size="mini"
              >修改</el-button
            >
            <!-- 删除 -->
            <el-button
              type="danger"
              @click="removes(scope.row)"
              size="mini"
              icon="el-icon-delete"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 新增弹出框 -->
      <el-dialog title="新增大事记" :visible.sync="el_show">
        <el-form>
          <el-form-item label="事记流水号" :label-width="formLabelWidth">
            <el-input v-model="number" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="创建时间" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入时间"
              v-model="time"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="标题" :label-width="formLabelWidth">
            <el-input
              v-model="title"
              autocomplete="off"
              placeholder="请输入标题"
            ></el-input>
          </el-form-item>
          <el-form-item label="内容" :label-width="formLabelWidth">
            <el-input
              v-model="content"
              autocomplete="off"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="pushs()">新 增</el-button>
          <el-button @click="err()">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 修改弹出框 -->
      <el-dialog title="修改大事记" :visible.sync="el_xiu">
        <el-form>
          <el-form-item label="事记流水号" :label-width="formLabelWidth">
            <el-input
              v-model="newtable.number"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="创建时间" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入时间"
              v-model="newtable.time"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="修改标题" :label-width="formLabelWidth">
            <el-input v-model="newtable.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="修改内容" :label-width="formLabelWidth">
            <el-input v-model="newtable.content" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="trueset()">修 改</el-button>
          <el-button @click="xg_err()">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 15]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="5"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchs: [],
      input: null,
      // 查找列表
      searchtableData: [
        {
          number: '2020123101',
          time: '2020-12-31',
          title: '年会',
          content: '哈哈哈哈哈',
          id: 0,
        },
        {
          number: '2021010101',
          time: '2021-01-01',
          title: '新年晨会',
          content: '为未来一年做展望',
          id: 1,
        },
        {
          number: '2021010102',
          time: '2021-01-01',
          title: '中午吃什么会议',
          content: '经过董事会激烈讨论，决定午饭为鸡公煲',
          id: 2,
        },
        {
          number: '2021010103',
          time: '2021-01-02',
          title: '中午吃什么会议',
          content: '经过董事会激烈讨论，决定午饭为酸菜鱼',
          id: 3,
        },
        {
          number: '2021010104',
          time: '2021-01-02',
          title: '晚上吃什么会议',
          content: '经过董事会激烈讨论，决定午饭为火锅',
          id: 4,
        },
      ],
      // 显示列表
      tableData: [
        {
          number: '2020123101',
          time: '2020-12-31',
          title: '年会',
          content: '哈哈哈哈哈',
          id: 0,
        },
        {
          number: '2021010101',
          time: '2021-01-01',
          title: '新年晨会',
          content: '为未来一年做展望',
          id: 1,
        },
        {
          number: '2021010102',
          time: '2021-01-01',
          title: '中午吃什么会议',
          content: '经过董事会激烈讨论，决定午饭为鸡公煲',
          id: 2,
        },
        {
          number: '2021010103',
          time: '2021-01-02',
          title: '中午吃什么会议',
          content: '经过董事会激烈讨论，决定午饭为酸菜鱼',
          id: 3,
        },
        {
          number: '2021010104',
          time: '2021-01-02',
          title: '晚上吃什么会议',
          content: '经过董事会激烈讨论，决定午饭为火锅',
          id: 4,
        },
      ],
      el_show: false,

      el_xiu: false,
      number: '',
      time: '',
      title: '',
      content: '',
      newtable: {
        time: '',
        title: '',
        content: '',
      },
      formLabelWidth: '120px',
      newid: 0,

      // 分页
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
    }
  },
  methods: {
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },

    // 查找
    search: function () {
      console.log(this.input)
      this.tableData.map((item) => {
        if (this.input == null || this.input == '') {
          this.tableData = this.searchtableData
          return
        } else if (item.number.includes(this.input)) {
          this.searchs = []
          this.searchs.push(item)
          console.log(this.searchs)
          this.tableData = this.searchs
          console.log(this.tableData)
          return
        }
      })
    },
    // 添加
    adds: function () {
      this.el_show = true
    },
    err: function () {
      this.el_show = false
    },
    // 删除
    removes: function (v) {
      this.newid = this.tableData.findIndex((item) => {
        return item.number == v.number
      })
      this.$confirm('此操作将永久删除该事记, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
          this.tableData.splice(this.newid, 1)
          this.searchtableData = this.tableData
          console.log(this.tableData)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 添加按钮
    pushs: function () {
      if (!this.number || !this.title || !this.content || !this.time) {
        this.$message.error('内容不能为空')
        return
      }
      let numbers =
        Math.max(
          ...this.tableData.map(function (item) {
            return item.number
          })
        ) + 1
      this.tableData.push({
        number: numbers,
        time: this.time,
        title: this.title,
        content: this.content,
      })
      this.searchtableData = this.tableData
      this.$message({
        message: '创建成功',
        type: 'success',
      })
      ;(this.number = ''),
        (this.time = ''),
        (this.title = ''),
        (this.content = ''),
        (this.el_show = false)
    },
    // 修改按钮
    sets: function (val) {
      this.el_xiu = true

      console.log(val)
      this.newtable = {
        number: val.number,
        time: val.time,
        title: val.title,
        content: val.content,
      }
    },
    // 修改
    xg_err: function () {
      this.el_xiu = false
    },

    trueset: function () {
      console.log(this.newtable.time + '===')
      for (var i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].number == this.newtable.number) {
          this.tableData[i].number = this.newtable.number
          this.tableData[i].time = this.newtable.time
          this.tableData[i].title = this.newtable.title
          this.tableData[i].content = this.newtable.content
          this.el_xiu = false
        }
      }
      this.searchtableData = this.tableData
    },
  },
}
</script>
<style scoped>
/* 全局样式 */
html,body,#app{
    height: 100%;
    margin: 0;
    padding: 0;
}
.el-breadcrumb {
    padding-bottom: 15px;
    font-size: 13px;
}
.el-table {
    margin-top: 15px;
}
.el-pagination {
    margin-top: 15px;
}
.el-carousel {
    margin-top: 15px;
}

</style>